<template>
	<view class="settings-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="title">系统设置</text>
		</view>
		
		<!-- 提醒设置 -->
		<view class="settings-group">
			<view class="settings-title">提醒设置</view>
			
			<view class="settings-list">
				<view class="settings-item">
					<view class="item-label">血糖测量提醒</view>
					<switch :checked="settings.bloodSugarReminder" @change="toggleSetting('bloodSugarReminder')" color="#8cc9a1" />
				</view>
				
				<view class="settings-item" v-if="settings.bloodSugarReminder">
					<view class="item-label">测量提醒时间</view>
					<picker mode="time" :value="settings.bloodSugarReminderTime" @change="setReminderTime" class="time-picker">
						<view class="picker-value">{{ settings.bloodSugarReminderTime }}</view>
					</picker>
				</view>
				
				<view class="settings-item">
					<view class="item-label">用药提醒</view>
					<switch :checked="settings.medicineReminder" @change="toggleSetting('medicineReminder')" color="#8cc9a1" />
				</view>
				
				<view class="settings-item">
					<view class="item-label">饮食记录提醒</view>
					<switch :checked="settings.dietReminder" @change="toggleSetting('dietReminder')" color="#8cc9a1" />
				</view>
				
				<view class="settings-item">
					<view class="item-label">健康报告提醒</view>
					<switch :checked="settings.reportReminder" @change="toggleSetting('reportReminder')" color="#8cc9a1" />
				</view>
			</view>
		</view>
		
		<!-- 数据导出 -->
		<view class="settings-group">
			<view class="settings-title">数据导出</view>
			
			<view class="settings-list">
				<view class="settings-item" @tap="exportData('bloodSugar')">
					<view class="item-label">导出血糖数据</view>
					<view class="item-arrow"></view>
				</view>
				
				<view class="settings-item" @tap="exportData('diet')">
					<view class="item-label">导出饮食数据</view>
					<view class="item-arrow"></view>
				</view>
				
				<view class="settings-item" @tap="exportData('all')">
					<view class="item-label">导出全部数据</view>
					<view class="item-arrow"></view>
				</view>
			</view>
		</view>
		
		<!-- 隐私设置 -->
		<view class="settings-group">
			<view class="settings-title">隐私设置</view>
			
			<view class="settings-list">
				<view class="settings-item">
					<view class="item-label">数据加密</view>
					<switch :checked="settings.dataEncryption" @change="toggleSetting('dataEncryption')" color="#8cc9a1" />
				</view>
				
				<view class="settings-item">
					<view class="item-label">自动同步</view>
					<switch :checked="settings.autoSync" @change="toggleSetting('autoSync')" color="#8cc9a1" />
				</view>
				
				<view class="settings-item" @tap="clearCache">
					<view class="item-label">清除缓存</view>
					<view class="item-value">{{ cacheSize }}</view>
				</view>
			</view>
		</view>
		
		<!-- 账号设置 -->
		<view class="settings-group">
			<view class="settings-list">
				<view class="settings-item" @tap="logout">
					<view class="item-label logout">退出登录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	// Mock设置数据
	const settings = ref({
		bloodSugarReminder: true,
		bloodSugarReminderTime: '08:00',
		medicineReminder: true,
		dietReminder: false,
		reportReminder: true,
		dataEncryption: false,
		autoSync: true
	})
	
	// 缓存大小
	const cacheSize = ref('2.5MB')
	
	// 切换设置开关
	const toggleSetting = (key) => {
		settings.value[key] = !settings.value[key]
		saveSettings()
	}
	
	// 设置提醒时间
	const setReminderTime = (e) => {
		settings.value.bloodSugarReminderTime = e.detail.value
		saveSettings()
	}
	
	// 保存设置
	const saveSettings = () => {
		// 这里应该调用API保存设置
		uni.setStorageSync('userSettings', settings.value)
		
		uni.showToast({
			title: '设置已保存',
			icon: 'success'
		})
	}
	
	// 导出数据
	const exportData = (type) => {
		// 这里应该调用API导出数据
		uni.showLoading({
			title: '正在导出...'
		})
		
		setTimeout(() => {
			uni.hideLoading()
			
			uni.showModal({
				title: '导出成功',
				content: `${type === 'all' ? '全部' : type === 'bloodSugar' ? '血糖' : '饮食'}数据已导出到您的设备`,
				showCancel: false
			})
		}, 1500)
	}
	
	// 清除缓存
	const clearCache = () => {
		uni.showModal({
			title: '清除缓存',
			content: '确定要清除所有缓存数据吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '正在清除...'
					})
					
					setTimeout(() => {
						uni.hideLoading()
						cacheSize.value = '0KB'
						
						uni.showToast({
							title: '缓存已清除',
							icon: 'success'
						})
					}, 1000)
				}
			}
		})
	}
	
	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '退出登录',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 这里应该调用API退出登录
					uni.showLoading({
						title: '正在退出...'
					})
					
					setTimeout(() => {
						uni.hideLoading()
						
						// 重定向到登录页面
						uni.reLaunch({
							url: '/pages/profile/index'
						})
					}, 1000)
				}
			}
		})
	}
	
	// 加载设置
	const loadSettings = () => {
		const savedSettings = uni.getStorageSync('userSettings')
		if (savedSettings) {
			settings.value = savedSettings
		}
	}
	
	// 页面加载时获取设置
	onMounted(() => {
		loadSettings()
	})
</script>

<style lang="scss">
	.settings-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		
		.page-header {
			background-color: #8cc9a1;
			padding: 60rpx 30rpx 30rpx;
			
			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		
		.settings-group {
			margin-bottom: 20rpx;
			
			.settings-title {
				padding: 30rpx 30rpx 10rpx;
				font-size: 28rpx;
				color: #999;
			}
			
			.settings-list {
				background-color: #fff;
				
				.settings-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1px solid #f5f5f5;
					
					&:last-child {
						border-bottom: none;
					}
					
					.item-label {
						font-size: 30rpx;
						color: #333;
						
						&.logout {
							color: #ff6b6b;
							width: 100%;
							text-align: center;
						}
					}
					
					.item-value {
						font-size: 28rpx;
						color: #999;
					}
					
					.item-arrow {
						width: 16rpx;
						height: 16rpx;
						border-top: 2rpx solid #ccc;
						border-right: 2rpx solid #ccc;
						transform: rotate(45deg);
					}
					
					.time-picker {
						.picker-value {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
		}
	}
</style> 